<template>

    <div>
        <ol>
            <li>var 只有全局作用域和函数级作用域, let 可以设置块级别作用域</li>
            <li>const常量类似java的final, 简单的值不可以改变， 数组和对象不能改变引用</li>
        </ol>
    </div>

</template>

<script>

    ///////////////////////////////作用域////////////////////////////////////////
    // var 只有全局作用域和函数级作用域
    {
        {
            var apple = "Apple";
        }
        console.log(apple) ;

        // let 属于块级别作用域
        {
            let userName = "Lucy";
        }
        // console.log(userName);
    }
    ////////////////////////////////////常量///////////////////////////////////
    {
        // 常量不可以更改
        const userFlag = false;
        // userFlag = true;
        const person = {};
        // person = {};
    }
    /////////////////////////////////////结构数组和结构对象//////////////////////////////////
    {
        function getFruit(){
            return ['Apple', 'Orange', 'Other'];
        }

        function getFruitObject(){
            return {'A':'Apple', 'Or':'Orange', 'O':'Other'};
        }
        // 结构数组
        let [a, b, c] = getFruit();
        console.log(a, b, c) ;

        // 结构对象
        let {'A':d, 'Or':e, 'O':f} = getFruitObject();
        console.log('--------------------------') ;
        console.log(d, e, f) ;
    }
    /////////////////////////////////////模板字符串//////////////////////////////////
    {
        let username = 'Lucy';
        let home = '郭巷';
        let goHome = `马上下班了${username}将会回${home}`;
        console.log(goHome);

        // 带有标签的模板
        let company = '菲利尔';
        let goCompany  = goCompanyAnas`就要上班了, ${username} 匆匆的赶到${company}!\n`;

        function goCompanyAnas(strings, ... values){
            console.log(strings);
            console.log(values);
        }

    }

    /////////////////////////////////////判断字符串是否包含其他字符串//////////////////////////////////
    {
        console.log("UserName".startsWith("User"), "UserName".endsWith("User"), "UserName".includes("User"));

    }

    /////////////////////////////////////默认参数//////////////////////////////////
    {
        function add(user = {}){
            console.log(user)
        }

        add(null);
        add(undefined);
    }

    ////////////////////////////////////spread 展开数组//////////////////////////////////
    {
        let fruits = ['Computer' , 'Mouse'],
        fruitsExt = ['Keybord', ... fruits];
        console.log(fruits, ...fruits, ...fruitsExt) ; // 展开
    }
    ////////////////////////////////////rest操作符可变参数//////////////////////////////////
    {
        function add(userName, ...other){
            console.log(userName, other)
        }
    }
    ////////////////////////////////////结构参数//////////////////////////////////
    {
        function add({userName, age, sex} = {}){
            console.log(userName, age, sex);
        }

        add({userName:'Lucy', age:25, sex:true});
    }

    ////////////////////////////////////函数名字的获取//////////////////////////////////
    {
        let addUser = function addUserExt(){};
        console.log(addUser.name);
        let addDept = function(){};
        console.log(addDept.name);
    }

    ////////////////////////////////////箭头函数//////////////////////////////////
    {
        let goHome = (dessert, drink) => {
            return dessert + drink;
        }
    }

    ////////////////////////////////////对象表达式, value可以省略//////////////////////////////////
    {
        let userName = 'Lucy', age = 22;
        let user = {
            userName,
            age
        };
        console.log(user);
    }

    ////////////////////////////////////对象名.//////////////////////////////////
    {
        let person = {};
        person['user name'] = 'Lili';
        let userRealName = 'user real name';
        person[userRealName] = '李丽丽';
        console.log(person);
    }
    ////////////////////////////////////对比相等//////////////////////////////////
    {
        // +0 === -0 // true
        // NaN == NaN // false
        console.log(Object.is(+0, -0)) ; // false
        console.log(Object.is(NaN, NaN)); // true
    }
    ////////////////////////////////////把对象的值复制到另一个对象//////////////////////////////////
    ////////////////////////////////////给对象增加属性//////////////////////////////////
    {
        let person = {};
        Object.assign(person, {'age':'22'});
        console.log(person);
    }
    ////////////////////////////////////改变prototype//////////////////////////////////
    {
        let a = {
            drink(){
                console.log("喝啤酒") ;
            }
        };

        let b = {
            drink(){
                console.log("喝奶茶");
            }
        };

        let c = Object.create(a);
        console.log(Object.getPrototypeOf(c) == a);
        console.log(Object.getPrototypeOf(a));
        c.drink();
        Object.setPrototypeOf(c, b);
        c.drink();

    }
    ////////////////////////////////////改变prototype, __proto__//////////////////////////////////
    {
        let a = {
            drink(){
                console.log("喝啤酒") ;
            }
        };

        let b = {
            drink(){
                console.log("喝奶茶");
            }
        };

        let c = {
            __proto__:b
        };
        c.drink();
        c.__proto__ = a;
        c.drink();

    }

    ////////////////////////////////////super使用//////////////////////////////////
    {
        let a = {
            drink(){
                console.log("喝啤酒") ;
            }
        };

        let b = {
            drink(){
                console.log("喝奶茶");
            }
        };

        let c = {
            __proto__:a,
            drink(){
                super.drink();
                console.log("喝过啤酒之后要喝奶茶");
            }
        };

        c.drink();
    }

    ///////////////////////////////////迭代器//////////////////////////////////
    {
        function iteratorArray(foods){
            let i = 0;

            return {
                next(){
                    let done = (i>=foods.length);
                    let value = !done?foods[i++]:undefined;
                    return {
                        done,
                        value
                    };
                }
            }
        }
        let ite = iteratorArray(['赵', '钱', '孙', '李']);
        console.log(ite.next());
        console.log(ite.next());
        console.log(ite.next());
        console.log(ite.next());
        console.log(ite.next());
    }
    ///////////////////////////////////生成器//////////////////////////////////
    {
        function* iteratorArray(foods){
            for(var i=0;i<foods.length;i++){
                yield foods[i];
            }
        }
        let ite = iteratorArray(['赵', '钱', '孙', '李']);
        console.log(ite.next());
        console.log(ite.next());
        console.log(ite.next());
        console.log(ite.next());
        console.log(ite.next());
    }
    ///////////////////////////////////class//////////////////////////////////
    {
        class Person{
            constructor(username){
                this.username = username;
            };

            get age(){
               return this._age;
            }

            set age(_age){
               console.log(_age);
                this._age = _age;
            }

            work(){
              console.log(`${this.username} working!`) ;
            };

            static goHome(){
                console.log("回家把");
            }
        }

        class student extends Person{

        }

        let person = new Person('Jack');
        person.work();
        person.age = 28;
        console.log(person.age);
        Person.goHome();

        let st = new student("小名");
        st.work();
    }
    ///////////////////////////////////set//////////////////////////////////
    {
        let mySet = new Set('东南西北');
        mySet.add('中');
        mySet.add('中');
        console.log(mySet);
        mySet.delete('东');
        console.log(mySet);
        console.log(mySet.has('北'));
        mySet.clear();
        console.log(mySet.size);
    }
    ///////////////////////////////////set//////////////////////////////////
    {
        var person = new Map();
        person.set("username", "赵薇");
        person.set("age", 25);
        person.set("email", 'jz@cz9.cn');
        person.delete("email");


        person.forEach((key, value) => {
            console.log(`${key} : ${value}`);
        })
    }


    export default {
        data() {
            return {
                data: []
            }
        },
        created() {

        }
    }

</script>

<style scoped>

</style>